<%--
  Created by IntelliJ IDEA.
  User: legion
  Date: 2020/12/24
  Time: 10:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    .div
    {
        display:none;
        border:1px solid ;
        height:50%;
        width:30%;
        position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
        top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
        left:24%;
        z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
        background: white;
    }
    .over
    {
        width: 100%;
        height: 100%;
        opacity:0.3;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
        filter:alpha(opacity=80);
        display: none;
        position:absolute;
        top:0;
        left:0;
        z-index:1;
        background-color: rgb(0,0,0);
    }
</style>
<script>
    /**
     *修改业务员信息
     */
    function update(uid,name,password,type2){
        $("#updateDiv").show()
        $("#amount").val(uid)
        $("#name").val(name)
        $("#admin").val(password)
        $(":radio[name='type'][value='" + type2 + "']").prop("checked", "checked");//设置单选按钮默认值
        /**
         * 点击按钮获取下拉框的值 修改数据
         */
        $("#submit").click(function () {
            var radioValue= $("input[name='type']:checked").val();//获取当前单选按钮value值
            $.ajax({
                url:"http://localhost:8080/usersServlet",
                type:"post",
                data:{type:2,
                    'amount':$("#amount").val(),
                    'name':$("#name").val(),
                    'admin':$("#admin").val(),
                    'type2':radioValue
                },
                success: function (data,status,xhr) {
                    $("#updateDiv").hide()
                    x()
                }
        })

    })

    }
    function x() {
        /**
         * 刷新页面信息
         */
        $.ajax({
            url:"http://localhost:8080/usersServlet",
            type:"post",
            data:{type:1},
            success: function (data,status,xhr) {
                if(data==""){
                    return;
                }
                data=JSON.parse(data);
                $("#tbody").empty();
                var tr = "";
                for(var a=0;a<data.length;a++){
                    var status="";
                    if(data[a].type==0){
                        status="管理员"
                    }if(data[a].type==1){
                        status="已授权业务员"
                    }else{
                        status="业务员"
                    }
                    tr+="<tr><td>"+data[a].uid+"</td><td>"+data[a].user_name+"</td><td>"+data[a].password+
                        "</td><td>"+status+"</td><td><button id='update"+data[a].uid+"' onclick='update("+data[a].uid+",\""+data[a].user_name+"\","+data[a].password+","+data[a].type+")' class=\"btn btn-primary\" value='"+data[a].uid+"'>修改</button>" +
                        "<button onclick='deletes("+data[a].uid+")' id='delete"+data[a].uid+"' class=\"btn btn-primary\" value='"+data[a].uid+"'>删除</button></td></tr>"
                }
                $("#tbody").append(tr);

            }
        })
    }
    /**
     * 删除业务员
     */
    function deletes(uid){
        $.ajax({
            url:"http://localhost:8080/usersServlet",
            type:"post",
            data:{type:3,'uid':uid},
            success: function () {
               x();
            }
        })
    }
    /**
     * 查询全部业务员
     */
    $(function () {
        $.ajax({
            url:"http://localhost:8080/usersServlet",
            type:"post",
            data:{type:1},
            success: function (data,status,xhr) {
                if(data==""){
                    return;
                }
                data=JSON.parse(data);
                $("#tbody").empty();
                var tr = "";
                for(var a=0;a<data.length;a++){
                    var status="";
                    if(data[a].type==0){
                        status="管理员"
                    }if(data[a].type==1){
                        status="已授权业务员"
                    }if(data[a].type==2){
                        status="业务员"
                    }
                    if(data[a].type=="0"){
                        tr+="<tr><td>"+data[a].uid+"</td><td>"+data[a].user_name+"</td><td>"+data[a].password+
                            "</td><td>"+status+"</td><td><button id='update"+data[a].uid+"' onclick='update("+data[a].uid+",\""+data[a].user_name+"\","+data[a].password+","+data[a].type+")' class=\"btn btn-primary\" value='"+data[a].uid+"'>修改</button>" +
                            "</td></tr>"
                    }if(data[a].type!="0"){
                        tr+="<tr><td>"+data[a].uid+"</td><td>"+data[a].user_name+"</td><td>"+data[a].password+
                            "</td><td>"+status+"</td><td><button id='update"+data[a].uid+"' onclick='update("+data[a].uid+",\""+data[a].user_name+"\","+data[a].password+","+data[a].type+")' class=\"btn btn-primary\" value='"+data[a].uid+"'>修改</button>" +
                            "<button onclick='deletes("+data[a].uid+")' id='delete"+data[a].uid+"' class=\"btn btn-primary\" value='"+data[a].uid+"'>删除</button></td></tr>"
                    }

                }
                $("#tbody").append(tr);

            }
        })
       /**
        * 点击按钮显示添加div
        */
        $("#accredit").click(function () {
              $("#insertDiv").show()
        })
        /**
         * 添加业务员
         */
        $("#submit1").click(function () {
            $.ajax({
                url:"http://localhost:8080/usersServlet",
                type:"post",
                data:{type:4,'name':$("#insertName").val(),'admin':$("#insertAdmin").val(),'status':$("#status option:selected").val()},
                success: function (data,status,xhr) {
                    $("#insertDiv").hide()
                    x()
                }
            })
        })
        $("#reset1").click(function () {
            $("#insertName").val('')
            $("#insertAdmin").val('')
            $("#status").val("2")
        })

        /**
         * 点击按钮重置文本框数据
         */
        $("#reset").click(function () {
            $("#name").val('')
            $("#admin").val('')
        })
        /**
         * 点击按钮关闭div
         */
        $("#close").click(function () {
            $("#updateDiv").hide()
        })
        $("#close1").click(function () {
            $("#insertDivc").hide()
        })
    })
</script>
<body>
<div>
    <button id="accredit" class="btn btn-primary">授权新业务员</button>
</div>
<br/>
<table id="table" class="table table-bordered">
    <tr><td>ID</td> <td>用户名</td> <td>密码</td> <td>权限级别</td> <td>操作</td></tr>
    <tbody id="tbody">

    </tbody>
</table>
</body>
<div id="updateDiv" class="div">
    <table class="table table-bordered">
        <tr><td>编号：</td> <td colspan="3"><input id="amount" readonly="readonly"></td></tr>
        <tr><td>用户名：</td> <td colspan="3"><input id="name"></td></tr>
        <tr><td>密码：</td> <td colspan="3"><input id="admin"></td></tr>
        <tr><td>权限等级：</td> <td>管理员<input type="radio" name="type" value="0"></td> <td>业务员<input type="radio" name="type" value="2"></td> <td>  已授权业务员<input type="radio" name="type" value="1"></td></tr>
        <tr><td colspan="4">
            <center>
            <button id="submit" class="btn btn-primary">提交</button> <button id="reset" class="btn btn-primary">重置</button> <button id="close" class="btn btn-primary">关闭</button>
            </center>
        </td></tr>
    </table>
</div>
<div id="insertDiv" class="div">
    <table class="table table-bordered">
        <tr><td>用户名：</td> <td><input id="insertName"></td></tr>
        <tr><td>密码：</td> <td><input id="insertAdmin"></td></tr>
        <tr><td>授权等级</td>
            <td>
            <select id="status"><option value="2">业务员</option> <option value="1">授权业务员</option> <option value="0">管理员</option></select>
            </td>
        </tr>
        <tr><td><input type="button" id="submit1" value="提交"> <input type="button" id="reset1" value="重置"> <input value="关闭" type="button" id="close1"></td> </tr>
    </table>
</div>
<div class="over"></div>
</html>
